﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CrossDomainRequest.aspx.cs"
    Inherits="CMSNSoftwareTutorials.HowToUseCrossDomainAjaxRequest.JsonpSample.CrossDomainRequest" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .car-information
        {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: stretch;
            display: -moz-box;
            -moz-box-orient: horizontal;
            -moz-box-align: stretch;
            display: -o-box;
            -o-box-orient: horizontal;
            -o-box-align: stretch;
            display: box;
            box-orient: horizontal;
            box-align: stretch;
            margin: 5px 0 0;
            width: 100%;
        }
        .car-information div
        {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            box-flex: 1;
            width: 720px;
            padding: 0 5px;
            text-align: justify;
            border-bottom: 1px solid #C2D6FF;
        }
        .car-information:hover
        {
            background-color: #C2D6FF;
        }
    </style>
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="car-details">
    </div>
    </form>
    <script type="text/javascript">
        $.ajax({
            url: 'http://localhost:7148/CarDetails.asmx/AllCars',
            type: 'GET',
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "jsonpCallbackfunction",
            error: function () {
                alert("Error in Jsonp");
            }
        });

        function jsonpCallbackfunction(responseData) {
            var dataReturnFromServer = responseData.d;
            var i = 0;
            while (dataReturnFromServer.length > i) {
                $(".car-details").append(function () {
                    var carInformation = $("<div/>", { class: "car-information" }).append($("<div/>").html(dataReturnFromServer[i].Make))
                    .append($("<div/>").html(dataReturnFromServer[i].Model)).append($("<div/>").html(dataReturnFromServer[i].Year))
                    .append($("<div/>").html(dataReturnFromServer[i].Doors)).append($("<div/>").html(dataReturnFromServer[i].Color))
                    .append($("<div/>").html(dataReturnFromServer[i].Price));
                    return carInformation;
                });
                i++;
            }
        }
    </script>
</body>
</html>
